<template>
  <div>
    <div id="login_box">
      <h2>LOGIN</h2>
      <div id="input_box">
        <label>
          <input v-model="account" type="text" placeholder="请输入用户名">
        </label>
      </div>
      <div class="input_box">
        <label>
          <input v-model="password" type="password" placeholder="请输入密码">
        </label>
      </div>
      <button @click="adminLogin">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      account: '',
      password: ''
    }
  },
  methods: {
    adminLogin() {
      let obj = {
        'account': this.account,
        'password': this.password
      }
      this.$http({
        url: this.$http.adornUrl('/xy/admin/login'),
        method: 'post',
        data: this.$http.adornData(obj)
      }).then(res => {
        console.log(res)
        if (res.data.code == 0) {
          sessionStorage.setItem("token", res.data.token)
          sessionStorage.setItem("tokenExpireTime", res.data.token)
          this.$router.push("/")
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  },
  mounted() {
    document.body.style.background = " url('http://localhost:8080/ocean-3605547_1280.jpg') no-repeat";
    document.body.style.backgroundSize = "  100% 150%";
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>

<style scoped>


#login_box {
  width: 20%;
  height: 400px;
  background-color: #00000060;
  margin: 10% auto auto;
  text-align: center;
  border-radius: 10px;
  padding: 50px 50px;
}

h2 {
  color: #ffffff90;
  margin-top: 5%;
}

#input-box {
  margin-top: 5%;
}

span {
  color: #fff;
}

input {
  border: 0;
  width: 60%;
  font-size: 15px;
  color: #fff;
  background: transparent;
  border-bottom: 2px solid #fff;
  padding: 5px 10px;
  outline: none;
  margin-top: 10px;
}

button {
  margin-top: 50px;
  width: 60%;
  height: 30px;
  border-radius: 10px;
  border: 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  background-image: linear-gradient(to right, #30cfd0, #330867);
}

#sign_up {
  margin-top: 45%;
  margin-left: 60%;
}

a {
  color: #b94648;
}
</style>
